<template>
    <div class="homework_footer">
        <div class="homework_footer_channel">
            <a-row class="homework_footer_channel_row">
                <a-col :span="3" class="homework_footer_channel_col_left">
                        <img src="./../assets/drawable-mdpi/button/group/enable.png" @click="jumpRouter()" >
                </a-col>
                <a-col :span="12" class="homework_footer_channel_col_center">
                    <div class="homework_channel_name">
                        {{$store.state.intercomList.channelManage.currChannel.name | limitChannelName}}
                    </div>
                    <div class="homework_channel_number">
                        共{{$store.state.intercomList.memberManage.currMember.channel.memberCount}}人，{{$store.state.intercomList.memberManage.currMember.channel.userCount}}人在线
                    </div>
                </a-col>
                <a-col :span="9" class="homework_footer_channel_col_right">
                    <div v-if="$store.state.intercomList.memberManage.talkingUser.isTalking===true">
                        <div class="homework_channel_null" ><!--v-if="touchStatus===true"-->
                            <!--{{$store.state.intercomList.memberManage.currMember.name||$store.state.intercomList.memberManage.currMember.nick}}-->
                            {{$store.state.intercomList.memberManage.talkingUser.nick}}
                        </div>
                        <div class="homework_channel_call" ><!--v-if="touchStatus===true"-->
                             正在讲话..
                        </div>
                    </div>
                </a-col>
            </a-row>
        </div>
        <div class="homework_footer_btn_div">
            <a-row class="homework_footer_btn_row">
                <a-col :span="16" class="homework_footer_col">
                    <a-button  class="homework_footer_btn" @touchstart="handleTouchStart()" @touchend="handleTouchEnd()">按住讲话</a-button>
                </a-col>
            </a-row>
        </div>
    </div>
</template>
<style>
    .homework_footer{
        position: absolute;
        width: 100vw;
        height: 36vw;
        background: rgb(64,64,64);
        bottom: 0;
        left: 0;

    }
    .homework_footer_channel{
        width: 100vw;
        height: 18vw;
        padding-left: 2vw;
    }
    .homework_footer_btn_div{
        width: 100vw;
        height:18vw ;
        line-height: 18vw;
    }
    .homework_footer_col{
        width: 100vw;
        height: 18vw;
        text-align: center;

    }
    .homework_footer_btn{
        width: 64.68vw;
        height: 16vw;
        font-size: 6.5vw;
        text-align: center;
        color: #268D48;
        /*border-radius: 8vw;*/
        /*background: rgb(90, 234, 106);*/
        background-image: linear-gradient(-180deg, #91F6A1 0%, #58E967 100%);
        box-shadow: 0 0 15px 3px rgba(88,233,103,0.50);
        border-radius: 10vw;
        font-family: PingFangSC-Semibold;
    }
    .homework_footer_col .ant-btn{
        background:#58E967;
        color: #268D48;
        generic-family: PingFangSC-Semibold;
        border:0;
    }
    .homework_footer_btn:active{
        background: #F6A41C;
        box-shadow: 0 0 15px 3px rgba(246,164,28,0.50);
        border-radius: 10vw;
        color: #268D48;
        font-family: PingFangSC-Semibold;
    }
    .homework_footer_channel_row{
        height: 18vw;
        padding: 0;
    }
    .homework_footer_channel_col_left{
        height: 18vw;
        line-height: 18vw;
    }
    .homework_footer_channel_col_center{
        height: 18vw;
        text-align: left;
        padding-left: 4vw;
        padding-top: 2vw;
        font-family: PingFangSC-Medium;
    }
    .homework_footer_channel_col_right{
        height: 18vw;
        text-align: right;
        padding-top: 2vw;
    }
    .homework_channel_name{
        height: 8vw;
        line-height: 8vw;
        color: white;
        font-size: 5vw;
        font-family: "Microsoft Yahei",serif;
    }
    .homework_channel_number{
        font-family: "Microsoft Yahei",serif;
        height: 7vw;
        line-height: 7vw;
        color: white;
        font-size: 4vw;

    }
    .homework_channel_null{
        height: 8vw;
        line-height: 8vw;
        color: orange;
        font-size: 4vw;
        text-align: center;
        font-family: "Microsoft Yahei",serif;
        padding-right: 2vw;
    }
    .homework_channel_call{
        height: 7vw;
        line-height: 7vw;
        color: orange;
        font-size: 4vw;
        text-align: center;
        padding-right: 2vw;
        font-family: "Microsoft Yahei",serif;
    }
</style>
<script>
    export default {
        name: "FooterChaanel",
        data() {
            return {
                msg: 'hello vue',
                //touchStatus:false,
            }
        },
        created(){

        },
        mounted(){

        },
        methods:{
            jumpRouter(){
                this.clickButton();
                this.$router.push('/groupMember');
            },
            handleTouchStart () {
                let success = function(result){
                    console.log("js开始对讲成功",result);
                };
                let fail = function(e){
                    console.log("js开始对讲失败",e);
                };
                Intercom.touchStart(success,fail);
                //this.touchStatus = true;

            },
            handleTouchEnd () {
                let success = function(result){
                    console.log("js释放对讲成功",result);
                };
                let fail = function(e){
                    console.log("js释放对讲失败",e);
                };
                Intercom.touchEnd(success,fail);
                //this.touchStatus = false;
            },

        },
        filters: {
            limitChannelName(value) {
                if (value === "Idle") {
                    value = "空闲频道";
                }
                if (!value) return '';
                if (value.length > 8) {
                    return value.slice(0, 9) + '...';
                }
                return value;
            },
        }
    }
</script>

